//banner
$banner-height: 330px;
$banner-padding-top: 40px;
// search-bar
$title-font-size: 36px;
$search-btn-font-size: 16px;
$search-input-height: 40px;
$search-input-width: 646px;
$search-input-btn-width: 106px;
$search-btn-bg-color: #0080ff;
$search-radio-active-color: #ff6600;

// query-block
$query-tree-bg-color: #f4f7fb;
$query-tree-active-color: #0080ff;

// hot-search
$seq-color: #8EB9F5;
$seq1-color: #f54545;
$seq2-color: #ff8547;
$seq3-color: #ffac38;
$seq-down-color: #62bb63;
$seq-up-color: #f54545;
// common
$text-font-size: 14px;
$x-axis-font-size: 12px;
$border-color: #e9e9e9;
$active-color: #0080ff;

.home{
    &-banner{
        background-image: url(/static/img/index_banner.png);
        background-size: cover;
        background-position: center center;
        height: $banner-height;
        padding-top: $banner-padding-top;
        text-align:center;
        &__con{
            margin: 0;
        }
    }
    &-data{
        margin: 0 auto;
        width: 1200px;
        padding-top: 40px;
    }
}

.search-bar {
    
    &__title {
        font-size: $title-font-size;
        line-height: $title-font-size + 60;
        color: #fff;
        font-weight: bold;
    }
    &__input {
        width: $search-input-width;
        height: $search-input-height;
        .el-input-group--append{
            .el-input__inner{
                background-color: rgba(255, 255, 255, 0.1);
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
                border-color: $search-btn-bg-color;
                color: #fff;
                &::-webkit-input-placeholder{
                    color:rgba(255,255,255,0.7);
                }
                &:hover{
                    border-color: $search-btn-bg-color;
                }
            }
            .el-input-group__append{
                border-radius: 0;
                background-color: $search-btn-bg-color;
                border: 1px solid $search-btn-bg-color;
                color: #fff;
                font-size:$search-btn-font-size;
                width:$search-input-btn-width;
                box-sizing: border-box;
            }
        } 
    }
}

.query-block {
    display: inline-block;
    width:$search-input-width;
    padding: 20px 0;
    text-align: left;
    .el-radio-group{
        line-height: 50px;
    }
    .el-radio{
        color: #fff;
        padding: 5px 10px;
        margin-left: 10px;
        &.is-checked{
            background-color:$search-radio-active-color;
            border-radius: 4px;
            box-shadow: 1px 1px 2px #666;
            color: #fff;
        }
    }
    .el-radio +.el-radio {
        margin-left: 10px;
    }
    .el-radio__input + .el-radio__label{
        color: #fff;
    }
    .el-radio__input.is-checked + .el-radio__label{
        color: #fff;
    }
    .el-radio__inner{
        background-color: rgba(255,255,255, .3);
        &::after{
            width: 8px;
            height: 8px;
        }
    }
    .custom-time{
        position: absolute;
        top: -1px;
        left: 110px;
        height: 30px;
        display: inline-block;
    }

        &__tree{
            .el-tree{
                &-node:focus > .el-tree-node__content {
                    background-color:#fff;
                }
            .custom-tree-node{
                width:165px;
                .node {
                    padding:3px 5px;
            }
            .active{
                background-color:$query-tree-active-color;
                color:#fff;
            }
        }
    }
}
}

.statistics {
    padding:0 10px;
    &-tab{
        &__label{
            display:inline-block;
            text-align:center;
            width: 80px;
            box-sizing: border-box;
        }
    }
    .el-tabs__active-bar{
        height: 3px;
    }
    .el-tabs__nav-wrap::after{
        background-color:$border-color;
    }
    .echarts{
        position: relative;
    }
    .time-filter{
        width: 100px;
        position: absolute;
        right: 10px;
        top: 0;
        z-index: 99;
        .el-input__inner{
            height: 35px;
            line-height: 35px;
        }
    }
}

.hot-search{
    .pager{
        width: 100px;
        position: absolute;
        right: 10px;
        top: 0;
        z-index: 9999;
        .el-pagination.is-background{
            .btn-prev, .btn-next {
                background-color: transparent;
            }
        }
    }
    &-tab{
        &__label{
            display:inline-block;
            text-align:center;
            width: 80px;
            box-sizing: border-box;
        }
    }
    .el-tabs__active-bar{
        height: 3px;
    }
    .el-tabs__nav-wrap::after{
        background-color:$border-color;
    }
    &__item{
        width: 100%;
        border-bottom: 1px solid $border-color;
        position: relative;
        height: 40px;
        line-height: 40px;
        .keyword{
          width: 100%;
          padding-right:50px;
          padding-left: 30px;
        }
        .count{
          width: 50px;
          position:absolute;
          right: 0;
          top: 0;
          color: #666;
        }
        .seq{
            top: 10px;
            text-align: center;
            width: 18px;
            height: 18px;
            font-size: 12px;
            line-height: 18px;
            position:absolute;
            left: 0;
            color: #fff;
            background-color: $seq-color;
            display:block;
            &.seq1{
                background-color: $seq1-color;
            }
            &.seq2{
                background-color:$seq2-color;
            }
            &.seq3{
                background-color:$seq3-color;
            }
        }
    }
}